<template>
    <div class="nav-container" :style="mgTop">
        <img class="nav-left" v-if="back" src="../../assets/nav/left.png" @click="handleLeft" alt="">
        <div class="nav-left" v-else/>
        <p class="nav-title">{{ title }}</p>
    </div>
</template>

<script>
export default {
    props: {
        back: {
            type: Boolean,
            default: true
        },
        title: {
            type: String,
            default: '万物友好'
        }
    },
    data () {
        return {

        }
    },
    computed: {
        mgTop () {
            let mgTop = 'padding-top: 64px'
            if (this.$store.state.iosType == 1) {
                mgTop = 'padding-top: 44px'
            } else if (this.$store.state.iosType == 2) {
                mgTop = 'padding-top: 64px'
            }
            return mgTop
        }
    },
    methods: {
        /* 点击左侧按钮时触发的事件 */
        handleLeft () {
            this.$emit('click-left')
        }
    }
}
</script>

<style lang="less" scoped>
.nav-container {
    width: 100%;
    margin: 0;
    padding: 0px 26px;
    box-sizing: border-box;
    .nav-left {
        width: 16px;
        height: 18px;
        display: block;
    }
    .nav-title {
        height: 33px;
        line-height: 33px;
        margin: 24px 0 0 0;
        padding: 0;
        font-size: 24px;
        font-weight: 600;
        color: #2D3748;
    }
}
</style>
